<template>
  <div class="container">
    <!--头部区域-->
    <div class="title">
      <img :src="userInfo.avatar_url ? userInfo.avatar_url : userInfo.sex === 1? '../../static/defaultAvatar1.jpeg': '../../static/defaultAvatar2.jpeg'" alt="">
      <div class="middle">
        <div class="middleTop">
          <span class="userName" :style="{color: levelColor[level(userInfo.experience).level]}">{{userInfo.name}}</span>
          <span :class="userInfo.sex===1?'iconfont icon-nan':'iconfont icon-nv'"></span>
          <span><i class="iconfont icon-zhuanyequanwei"></i>{{userInfo.discipline}}</span>
          <span><i class="iconfont icon-shuji"></i>{{userInfo.currentStatus}}</span>
        </div>
        <div class="achievement">
          <ul class="achievementUl">
            <li><span class="num">{{this.achievementData.passNum}}</span><span>被访问</span></li>
            <li><span class="num">{{this.achievementData.subNum}}</span><span>原创</span></li>
            <li><span class="num">{{this.achievementData.fansNum}}</span><span>粉丝</span></li>
          </ul>
        </div>
        <div class="detailInfo" ref="detailInfo">
          <div>个人简介： {{userInfo.description}}</div>
          <div><span>毕业时间:{{userInfo.graduateAt}}</span><span>目前就职:</span></div>
          <div>加入网站时间:{{userInfo.createAt}}</div>
        </div>
        <div @click="openMore">查看详细资料<i :class="isOpen===true ? 'iconfont icon-xiangshangjiantou':'iconfont icon-xiangxiajiantou'"></i></div>
      </div>
      <div class="buttonGroup">
        <el-button v-if="!isFocus" @click="addRelation" size="small"><i class="iconfont icon-jia"></i>关注</el-button>
        <el-tag v-else @click="cancelFocus">已关注</el-tag>
        <el-button @click="toChat" size="small">
            <i class="iconfont icon-sixin"></i>私信
          </el-button>
      </div>

    </div>
    <!--内容区域-->
    <div class="content">
      <div class="leftContent">
        <el-card>
          <div>个人成就</div>
          <div>获得{{userInfo.praise}}次点赞</div>
          <div>获得{{userInfo.reply}}次评论</div>
          <div>获得{{userInfo.collection}}次收藏</div>
        </el-card>
      </div>
      <div class="rightContent">
        <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
          <el-tab-pane label="帖子" name="passage">
            <SubMoment v-if="subMomentList.length>0" :momentList="subMomentList" />
          </el-tab-pane>
          <el-tab-pane label="关注的人" name="focus">
            <UserList :list="focusList" v-if="focusList.length!==0"></UserList>
            <div v-else>没有关注的人</div>
          </el-tab-pane>
          <el-tab-pane label="粉丝" name="fans">
            <UserList v-if="fansList.length!==0" :list="fansList"></UserList>
            <div v-else>没有粉丝，真拉啊</div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import levelColor from '../constant/levelColor'
import level from '../utils/level'
import UserList from '../components/UserList.vue'
import SubMoment from '../components/SubMoment.vue'
export default {
  data () {
    return {
      subMomentList: [],
      activeName: 'passage',
      userInfo: {},
      isFocus: false,
      isOpen: false,
      achievementData: {},
      focusList: [],
      totalFocus: 0,
      totalFans: 0,
      fansList: [],
      levelColor
    }
  },
  components: {
    UserList,
    SubMoment
  },
  methods: {
    async getFansList () {
      const userId = this.$route.params.userId
      const res = await this.$http.get(`/action/fansList/${userId}`)
      this.fansList = res.data
      this.totalFans = res.data.length
    },
    async getSubMoment () {
      const userId = this.$route.params.userId
      const {data: res} = await this.$http.get(`/moment/subMoment/${userId}`)
      this.subMomentList = res
    },
    async getFocusList () {
      const userId = this.$route.params.userId
      const res = await this.$http.get(`/action/focusList/${userId}`)
      this.focusList = res.data
      this.totalFocus = res.data.length
    },
    openMore () {
      if (!this.isOpen) {
        this.$refs.detailInfo.style.maxHeight = 'max-content'
        this.isOpen = true
      } else {
        this.$refs.detailInfo.style.maxHeight = 16 - 1 + 'px'
        this.isOpen = false
      }
    },
    async getAchievement () {
      const {data: res} = await this.$http.get(`/users/achievement/${this.$route.params.userId}`)
      this.achievementData = res
    },
    async cancelFocus () {
      await this.$http.post(`/users/relation/${this.userInfo.id}/2`)
      this.getUserInfo()
      this.isFocus = false
    },
    async getUserInfo () {
      const userId = this.$route.params.userId
      const res = await this.$http.get(`/users/${userId}`)
      this.userInfo = res.data
      this.queryRelation()
    },
    toChat () {
      this.$router.push({path: '/chat', query: {id: this.userInfo.id, name: this.userInfo.name}})
    },
    async addRelation () {
      await this.$http.post(`/users/relation/${this.userInfo.id}/1`)
      this.queryRelation()
    },
    async queryRelation () {
      const {data: res} = await this.$http.get(`/users/relation/${this.userInfo.id}`)
      if (res[0] !== undefined && res[0].type === 1) {
        this.isFocus = true
      } else {
        this.isFocus = false
      }
    },
    async addPass () {
      console.log(this.$router, 'ddd')
      this.$http.post(`/action/pass/${this.$route.params.userId}`)
    },
    level
  },
  created () {
    this.getSubMoment()
    this.getUserInfo()
    this.addPass()
    this.getAchievement()
    this.getFocusList()
    this.getFansList()
  }
}
</script>

<style scoped lang="less">
  .detailInfo{
    max-height: 15px;
    overflow: hidden;
    margin: 5px 0;
  }
  .achievementUl{
    display: flex;
    li {
      .num {
        color: #222226;
        font-weight: 600;
        font-size: 20px;
        line-height: 24px;
        margin-right: 4px;
      }
      padding-right: 10px;
      border-right: 1px solid #e3e3e6;
    }
  }
  .container{
    background-color: #f7f8f9;
    padding: 10px 200px;
  }
  .container .title{
    box-sizing: border-box;
    border-left: 15px solid #5b9bf8;
    display: flex;
    padding: 10px;
    background-color: #fff;
    overflow: hidden;
  }
  .title img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-left: 50px;
  }
  .middle{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
  }
  .userName{
    font-size: 18px;
    letter-spacing: 1px;
  }
  .jianjie{
    border-radius: 5px;
    padding: 2px;
    font-size: 12px;
    margin-left: 25px;
  }
  .middleBottom{
    font-size: 12px;
  }
  .buttonGroup{
    .el-button {
      margin: 0 5px;
      display: flex;
      align-items: center;
    }
    .el-tag:hover {
      cursor: pointer;
    }
    margin-left: auto;
    margin-right: 10px;
    display: flex;
    align-items: center;
  }
  .content{
    display: flex;
    margin-top: 10px;
    .rightContent {
      flex: 1;
      margin-left: 20px;
    }
  }
  .content .leftContent{
    width: 250px;
  }
</style>
